<template>
  <div id="playPage" class="view flex">
    <div class="play_left">
      <h3 class="red" style="text-align: left;margin-top: 25px">玩法规则</h3>
      <ul>
        <li class="flex" v-for="(item, index) in playData" :key="index">
         <div class="img_box">
           <img src="../../../static/img/51.png" alt="">
         </div>
          <div class="item" @click="goPlay(item.path)">{{item.name}}</div>
        </li>
        <!--<el-tabs tab-position="left" >-->
          <!--<el-tab-pane label="用户管理">用户管理</el-tab-pane>-->
          <!--<el-tab-pane label="配置管理">配置管理</el-tab-pane>-->
          <!--<el-tab-pane label="角色管理">角色管理</el-tab-pane>-->
          <!--<el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>-->
        <!--</el-tabs>-->
      </ul>
    </div>
      <router-view></router-view>
    </div>

</template>

<script>
  export default {
    data () {
      return {
        playData: [
          {
            name: '北京PK10',
            path: '/play/bjpk10'
          },
          {
            name: '福彩3D',
            path: '/play/fc3D'
          },
          {
            name: '江苏快三',
            path: '/play/jsk3'
          },
          {
            name: '六合彩',
            path: '/play/liuhe'
          },
          {
            name: '排列三',
            path: '/play/pl3'
          },
          {
            name: '三分时时彩',
            path: '/play/sfshishi'
          },
          {
            name: '上海11选5',
            path: '/play/sh11x5'
          }
        ]
      }
    },
    methods: {
      goPlay(path){
        this.$router.push(path)
      }
    }
  }
</script>

<style lang="less">
  #playPage {
    margin-top: 20px;
  }
  .el-tabs--left .el-tabs__nav-wrap::after, .el-tabs--right .el-tabs__nav-wrap::after{
    height:0;
  }
  .el-tabs__active-bar{
    height:0!important;
  }
  .play_left {
    width: 250px;
    border-right: 1px solid #ccc;
    padding-left: 80px;
    ul {
      margin-top: 20px;
    }
    li {
      text-align: left;
      height: 25px;
      line-height: 25px;
      margin: 6px 0;
      cursor: pointer;
      .img_box{
        width: 25px;
        height: 25px;
        border-radius: 50%;
        padding:2px;
        margin-right: 10px;
      }
      img{
        width: 100%;
        height:100%;
      }
    }
  }

  .play_right {
    h2{
      font-size: 12px;
      color: red;
    }
    h1{
      padding:5px 0;
    }
    flex: 1;
    padding:20px;
    text-align: left;
    .top{
      height: 40px;
      line-height: 40px;
      .item1{
        width: 40px;
        height:40px;
        margin-right: 10px;
        img{
          height: 100%;
          width:100%;
        }
      }


    }
    ol{
      text-align: left;
      color: red;
      font-weight: bold;
      padding:20px;
    }
    .content{
      text-align: left;

    }
  }
</style>
